<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单列表</title>
    <script src="../static/static/vue.min.js"></script>
    <script src="../static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="../static/lib-master/theme-chalk/index.css" />
    <script src="../static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
            <el-table-column prop="goodsId" header-align="center" align="center" label="商品id">
            </el-table-column>
            <el-table-column prop="deliveryAddrId" header-align="center" align="center" label="收获地址id">
            </el-table-column>
            <el-table-column prop="goodsName" header-align="center" align="center" label="冗余过来的商品名称">
            </el-table-column>
            <el-table-column prop="goodsCount" header-align="center" align="center" label="商品数量">
            </el-table-column>
            <el-table-column prop="goodsPrice" header-align="center" align="center" label="商品单价">
            </el-table-column>
            <el-table-column prop="goodsChannel" header-align="center" align="center" label="1.pc 2.android 3.ios">
            </el-table-column>
            <el-table-column prop="status" header-align="center" align="center" label="订单状态">
            </el-table-column>
            <el-table-column prop="createDate" header-align="center" align="center" label="订单创建时间">
            </el-table-column>
            <el-table-column prop="payDate" header-align="center" align="center" label="支付时间">
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="pay(scope.row.id)">支付</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                baseUrl: 'http://localhost:88/api',
                dataForm: {
                    key: ''
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
            }
        },
        created() {
            this.getDataList();
        },
        methods: {
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                axios.get(`${this.baseUrl}/user/orderinfo/list`).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list
                        this.totalPage = data.page.totalCount
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            // 支付
            pay(orderId) {
                location = `http://localhost:7000/goods/pay/alipay?orderId=${orderId}`
            }
        },
    })
</script>

</html>